<template>
	<view>
		<image src="../../static/1-1-04.jpg" class="singinImg"></image>
		<view class="login-form" v-if="!isLogin">
			<form @submit="Signin" @reset="">
				<view class="login-box">
					<view class="career-title">
						<image src="../../static/1.png" class="en-A"></image>
						<view class="career-title-text">
							<text class="career">职业规划</text>
							<text class="careerai">careerai</text>
						</view>
					</view>
					<text class="welcome">welcom to CAREERAI</text>
					<input class="uni-input in-name" placeholder="账号" type="number" name="username" />
					<input class="uni-input in-pwd" placeholder="密码" type="password" name="password" />
					<button class="login-button" form-type="submit">登录</button>
					<text class="middle">—OR—</text>
					<button class="weixin-btn" open-type="getUserInfo" @getuserinfo="getUserOpenid">
						<uni-icons class="weixin" :type="icons.name" :color="icons.color" />
					</button>
				</view>
			</form>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				icons: {
					name: 'weixin',
					color: '#00d600'
				},
				username: '',
				password: '',
				isLogin: false,
			}
		},
		computed: {
			...mapState(['userinfo'])
		},
		methods: {
			...mapMutations(['userlogin']),
			// 封装登录成功函数（弹窗延时+跳转）
			successLogin() {
				uni.showToast({
					title: '登录成功',
					icon: 'success',
				})
				this.isLogin = true
				setTimeout(() => {
					uni.switchTab({
						url: '/pages/home/home'
					})
				}, 1500)
			},
			// 微信登录
			getUserOpenid() {
				var _self = this
				// 授权，获取用户信息，
				uni.getUserInfo({
					provider: 'weixin',
					// 若授权成功
					success(infoRes) {
						uni.showLoading({
							title: '登陆中',
							icon: ''
						})
						// 先存放授权后的个人信息
						_self.userinfo.info = infoRes.userInfo
						// 获取登录状态的jscode
						uni.login({
							provider: 'weixin',
							success: (res) => {
								_self.userinfo.jscode = res.code
								// 将jscode传递到后端,进行openid验证，判断账号是否绑定
								_self.$request({
									url: 'occupation/getUserConnection/',
									data: {
										'jscode': res.code
									},
								}).then(res => {
									uni.hideLoading()
									// 若返回200，则表示微信已绑定
									// 若返回304,条件不满足，要注册绑定学号
									if (res.code === 200) {
										_self.successLogin()
										_self.userinfo.user_id = res.data.user_id
										_self.userinfo.token = res.data.token
									} else if (res.code === 304) {
										uni.showModal({
											title: '未绑定账号',
											content: '使用前请先注册或绑定账号',
											cancelText: '注册',
											confirmText: '绑定',
											success: (res) => {
												if (res.confirm) {
													uni.navigateTo({
														url: '../binding/binding'
													})
												} else if (res.cancel) {
													uni.navigateTo({
														url: '../register/register'
													})
												}
											}
										})
									}
								})
							},
							fail() {
								console.log('jscode获取失败')
							}
						})
					},
					// 若授权失败,提示需要登录
					fail() {
						_self.$showMessage('先授权才能登录')
					}
				})
			},
			// 账号密码登录
			Signin(e) {
				var _self = this
				var forData = e.detail.value
				if (forData.username === '' || forData.password === '') {
					this.$showMessage('请输入账号密码')
				} else {
					uni.showLoading({
						title: '登陆中'
					})
					this.$request({
						method: 'POST',
						url: 'auth/login/',
						header: {
							'content-type': 'application/x-www-form-urlencoded'
						},
						data: {
							'username': forData.username,
							'password': forData.password
						},
					}).then(res => {
						if (res.code === 200) {
							uni.hideLoading()
							_self.userinfo.token = res.data.token
							_self.userinfo.user_id = res.data.user_id
							this.$request({
								method: "GET",
								url: 'auth/getUserInfo/',
								data: {
									user_id: res.data.user_id
								},
								header: {
									token: res.data.token
								},
							}).then(res => {
								this.successLogin()
							})
						} else {
							uni.showToast({
								title: res.message,
								icon: 'none'
							})
						}
					})

				}
			}
		}
	}
</script>

<style>
	.singinImg {
		position: absolute;
		z-index: 0;
		width: 100%;
		height: 100%;
	}

	.career-title {
		display: flex;
		flex-direction: row;
		height: 60px;
		width: 190px;
		margin: auto;
	}

	.en-A {
		width: 40px;
		height: 40px;
		margin-top: 10px;
		margin-right: 5px;
	}

	.career-title-text {
		display: flex;
		flex-direction: column;
		justify-content: center;
		color: #FFFFFF;
		/* 设置字间距 */
		letter-spacing: 8px;
	}

	.career {
		font-size: 24px;
		text-align: center;
	}

	.careerai {
		text-align: center;
		-webkit-box-reflect: below 0 -webkit-linear-gradient(top, rgba(250, 250, 250, 0), rgba(250, 250, 250, .0) 30%, rgba(250, 250, 250, .5));
		box-reflect: below 0 linear-gradient(top, rgba(250, 250, 250, 0), rgba(250, 250, 250, .0) 30%, rgba(250, 250, 250, .5));
	}

	.welcome {
		font-family: SimHei;
		text-align: center;
		margin: auto;
		margin-top: 30px;
		color: #FFFFFF;
		letter-spacing: 3px;
	}

	.login-form {
		height: 450px;
		margin: auto;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.login-box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: center;
	}

	.uni-input {
		width: 185px;
		height: 40px;
		border: #f1ede9 2px solid;
		border-radius: 20px;
		margin: auto;
	}

	.in-name {
		margin-top: 30px;
	}

	.in-pwd {
		margin-top: 20px;
	}

	.login-button {
		width: 100px;
		height: 40px;
		line-height: 40px;
		border-radius: 20px;
		margin-top: 25px;
		background-color: #FFFFFF;
	}

	.login-mini {
		width: 40px;
		height: 40px;
		margin-top: 40px;
	}

	.weixin-btn {
		height: 50px;
		width: 50px;
		border-radius: 50%;
		border: #FFFFFF 2px solid;
	}

	.middle {
		margin: 20px;
		color: #FFFFFF;
	}

	.weixin {
		height: 50px;
		width: 50px;
	}
</style>
